<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="SKU状态变更"
    width="500"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form :model="formValues" ref="formRef" label-position="top">
      <el-form-item label="产品状态">
        <el-select
          v-model="formValues.product_status"
          placeholder="请选择"
          class="w-full"
        >
          <el-option
            :value="item.value"
            :label="item.label"
            v-for="item in options['goods.GoodsSku']?.[0].productStatusText"
            :key="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="销售状态">
        <el-select v-model="formValues.sales_status" placeholder="请选择" class="w-full">
          <el-option
            v-for="item in options['goods.GoodsSku']?.[0].salesStatusText"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货源状态">
        <el-select v-model="formValues.supply_status" placeholder="请选择" class="w-full">
          <el-option
            v-for="item in options['goods.GoodsSku']?.[0].supplyStatusText"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变更原因">
        <el-input
          v-model="formValues.remark"
          type="textarea"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <div class="text-[#666]">
        注:
        <p>
          1、开发状态=通过，则无法直接修改；点击确定后，系统自动创建商品资料变更单；审核通过后修改对应字段；
        </p>
        <p>2、开发状态≠通过，则支持直接修改；</p>
        <p>3、状态为空，或者所要变更状态与数据当前状态一致，则系统默认不处理；</p>
      </div>
    </el-form>

    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus";
import { batchUpdateStatus } from "../api.js";
const visible = ref(false);
const loading = ref(false);
const formValues = ref({});
const formRef = ref();
const emit = defineEmits(["refresh"]);
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);

const load = ref(false);

const data = reactive({
  ids: [],
  sku_inventory_list: [],
});

const { ids, sku_inventory_list } = toRefs(data);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value[data.name] = data.ids;
  sku_inventory_list.value = data.sku_inventory_list;
  visible.value = true;
};
const save = async () => {
  const valid = await formRef.value.validate();
  if (!valid) return;
  loading.value = true;
  if (formValues.value.sales_status == 4) {
    const has_inventory = [];
    sku_inventory_list.value.forEach((element) => {
      if (Number(element.inventory)) {
        has_inventory.push(`所选SKU:${element.sku} 库存>0`);
      }
    });
    if (has_inventory.length > 0) {
      await handleConfirmAndUpdate(has_inventory);
    }
  }

  try {
    const res = await batchUpdateStatus(
      Object.assign({}, ids.value, { params: formValues.value })
    );
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const handleConfirmAndUpdate = (array) => {
  return new Promise(async (resolve, reject) => {
    await ElMessageBox({
      title: "是否继续变更？",
      message: <div>{array.map((d) => h("p", null, d))}</div>,
      showCancelButton: true,
    })
      .then(async () => {
        resolve(true);
      })
      .catch(() => {
        reject(false);
      });
  });
};
const close = async (refresh) => {
  ids.value = {};
  formValues.value = {};
  await nextTick();
  formRef.value.resetFields();
  if (refresh) emit("refresh");
  loading.value = false;
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
